<template>
  <div class="drawer">
    <div>
      <a-button type="primary" @click="showDrawer">基础抽屉</a-button>
      <a-drawer
        v-model:open="open"
        class="custom-class"
        title="抽屉"
        placement="right"
        @after-open-change="afterOpenChange"
      >
        <p>测试内容001...</p>
        <p>测试内容002...</p>
        <p>测试内容003...</p>
      </a-drawer>
    </div>
    <div style="margin: 20px 0">
      <a-button type="primary" @click="showDrawer1">多层抽屉</a-button>
      <a-drawer
        v-model:open="open1"
        title="第一层抽屉"
        width="520"
        :closable="true"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
      >
        <a-button type="primary" @click="showChildrenDrawer">打开子抽屉</a-button>
        <a-drawer v-model:open="childrenDrawer" title="第二层抽屉" width="320" :closable="true">
          <p>测试子抽屉...</p>
          <p>测试子抽屉...</p>
          <p>测试子抽屉...</p>
        </a-drawer>

        <template #footer>
          <a-button style="margin-right: 12px" @click="onClose">取消</a-button>
          <a-button type="primary" @click="onClose">确定</a-button>
        </template>
      </a-drawer>
    </div>
    <div>
      <a-button type="primary" @click="showBottomDrawer">从下往上抽屉</a-button>
      <a-drawer
        v-model:open="open2"
        class="custom-class"
        title="从下往上抽屉"
        placement="bottom"
        height="90%"
      >
        <p>测试内容001...</p>
        <p>测试内容002...</p>
        <p>测试内容003...</p>

        <template #footer>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 12px" @click="onClose2">取消</a-button>
            <a-button type="primary" @click="onClose2">确定</a-button>
          </div>
        </template>
      </a-drawer>
    </div>

    <h1>概述</h1>
    <div> 基础抽屉：点击触发按钮抽屉从右滑出，点击遮罩区关闭。 </div>
    <div> 多层抽屉：在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。 </div>
    <div> 关闭按钮可通过属性closable来控制显示隐藏 </div>
    <div> 按钮可通过插槽的形式进行展示solt </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const open = ref(false);
  const afterOpenChange = (bool) => {
    console.log('open', bool);
  };
  const showDrawer = () => {
    open.value = true;
  };

  const open1 = ref<boolean>(false);
  const childrenDrawer = ref<boolean>(false);

  const showDrawer1 = () => {
    open1.value = true;
  };
  const onClose = () => {
    open1.value = false;
  };
  const showChildrenDrawer = () => {
    childrenDrawer.value = true;
  };

  const open2 = ref<boolean>(false);
  const showBottomDrawer = () => {
    open2.value = true;
  };
  const onClose2 = () => {
    open2.value = false;
  };
</script>
<style lang="less" scoped>
  h1 {
    margin-top: 50px;
    font-size: 30px;
    font-weight: 600;
  }

  div {
    line-height: 22px;
  }

  .drawer {
    padding: 50px;
  }
</style>
